<script setup lang="ts">
import { IntercityOrderType, OrderType } from '@/types/enum'

const props = defineProps<{
  isSelected?: boolean
  showCheckbox?: boolean
  time: string
  type: 'normal' | 'intercity'
  orderType: OrderType | IntercityOrderType
  from: string
  to: string
  price: string
}>()

const orderTypeName = computed(() => {
  if (props.type === 'normal') {
    const names = {
      [OrderType.包车]: '包车',
      [OrderType.代叫]: '代叫',
      [OrderType.捎件]: '捎件',
    }
    return names[props.orderType as OrderType]
  }
  else {
    const names = {
      [IntercityOrderType.城际购票]: '城际购票',
      [IntercityOrderType.城际捎件]: '城际捎件',
    }
    return names[props.orderType as IntercityOrderType]
  }
})
</script>

<template>
  <view class="mb-24rpx flex items-end justify-between bg-white px-24rpx py-32rpx">
    <view class="flex items-center">
      <Checkbox v-if="showCheckbox" :checked="props.isSelected" />
      <Spacer v-if="showCheckbox" width="18" />
      <view class="flex flex-col">
        <view class="flex items-center">
          <image
            class="h-22rpx w-22rpx"
            src="@/static/images/clock_gray_fill.png"
          />
          <Spacer width="8" />
          <view class="text-28rpx text-#999999 font-medium leading-28rpx">
            {{ props.time }}
          </view>
          <Spacer width="30" />
          <view class="rounded-full from-#FF966D to-#FA5431 bg-gradient-to-r px-17rpx py-10rpx text-26rpx text-white font-bold leading-26rpx">
            {{ orderTypeName }}
          </view>
        </view>
        <Spacer height="18" />
        <Address dot-color="#3F8BF6">
          {{ from }}
        </Address>
        <Spacer height="24" />
        <Address dot-color="#FA662F">
          {{ to }}
        </Address>
      </view>
    </view>
    <view class="text-30rpx text-#F53B25 font-bold">
      {{ price }}元
    </view>
  </view>
</template>
